<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            justify-content: space-evenly;
            align-items: flex-end;
            width: 800px;
            height: 500px;
            background-color: aqua;
            margin: 50px auto;
            border: 1px black solid;
        }

        .box div {
            width: 80px;
            height: 80px;
            text-align: center;
            background-color: pink;
            /* overflow: hidden; */
        }

        .box div span {
            display: block;
            margin-top: -20px;

        }

        .box div span:nth-child(2) {
            display: block;
            margin-top: 50px;
        }
    </style>
</head>

<body>

    <script>
        let arr = []
        for (let i = 0; i < 4; i++) {
            arr[i] = prompt('请输入第' + (i + 1) + '季度数据')
        }
        document.write(`
        <div class="box">
        <div class="box1" style="height: ${arr[0]}px;"><span>${arr[0]}</span><span>第1季度</span></div>
        <div class="box2" style="height: ${arr[1]}px;"><span>${arr[1]}</span><span>第2季度</span></div>
        <div class="box3" style="height: ${arr[2]}px;"><span>${arr[2]}</span><span>第3季度</span></div>
        <div class="box4" style="height: ${arr[3]}px;"><span>${arr[3]}</span><span>第4季度</span></div>
            </div>
        `)
    </script>
</body>

</html>